<template>
  <div class="hd Confirm">
    <div class="hd mt10">
      <img src="../../assets/banner03.png">
    </div>

    <div class="hd mt10">
      <sider-menu  :activeNumber="0"></sider-menu>
      <div class="right-content">
        <position style="padding:12px;width:auto;">
          <router-link to="/personal">个人中心</router-link>
          &gt;
          <span class="last">我的信息</span>
        </position>

        <div class="clearfix main">
          <div class="fl">
            <i class="iconfont icon-user"></i>
          </div>
          <div class="fl main-con re"  style="margin:10px 20px;">
            <h1 style="overflow:auto;">{{person.personName}} <a href="javascript:;" @click="openDialog" class="edit fr" style="font-size:14px;"><i class="iconfont icon-edit"></i> 编辑个人信息</a></h1>
            <p><span class="t3">性别：</span> {{['', '男', '女'][person.sex]}}</p>
            <p><span class="t3">出生日期：</span> {{person.dob&&person.dob.substr(0,10)}}</p>
            <p><span class="t3">证件类型：</span> {{person.certificate && person.certificate.certificateNo}}</p>
            <p><span class="t3">证件号码：</span> {{CARD_TYPE[person.certificate && person.certificate.certificateType]}}</p>
            <p><span class="t3">电话：</span> {{person.phoneNo}}</p>
          </div>
        </div>
        </div>
    </div>

<el-dialog :visible.sync="dialogShow" custom-class="dialog-common personal-dialog">
      <div class="dialog-title" slot="title">
        编辑个人信息
      </div>
      <div class="dialog-content">
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px">
        
          <el-form-item label="真实姓名" prop="realName" required>
            <el-input v-model="ruleForm.realName" placeholder="请输入真实姓名" :maxlength="6" :disabled="disabled.realName"></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="cardType" required>
            <el-select v-model="ruleForm.cardType" required :disabled="disabled.cardType">
              <el-option
              v-for="(value, key) in CARD_TYPE"
              :key="key"
              :label="value"
              :value="key">
             </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="cardNo" required>
            <el-input v-model="ruleForm.cardNo" placeholder="请输入证件号码" :maxlength="18" :disabled="disabled.cardNo"></el-input>
          </el-form-item>
            <el-form-item label="出生年月" prop="bornDate" required>
             <el-date-picker
              v-model="bornDate"
              type="date"
              placeholder="请选择出生年月"
              style="width:100%;" :disabled="disabled.bornDate">
            </el-date-picker>
          </el-form-item>
           <el-form-item label="性别" prop="sex" required>
              <el-radio class="radio" v-model="sex" label="1" :disabled="disabled.sex">男</el-radio>
              <el-radio class="radio" v-model="sex" label="2" :disabled="disabled.sex">女</el-radio>
          </el-form-item>
          <el-form-item label="手机号码" prop="phoneNumber" required>
            <el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号" :maxlength="11" :disabled="disabled.phoneNumber"></el-input>
          </el-form-item>
       </el-form>
      </div>
      <div class="center" slot="footer">
        <a href="javascript:;" class="common-main-button"  @click="confirmSubmit('ruleForm')">提交</a>
						<a href="javascript:;"  class="common-sub-button" @click="dialogShow=false">取消</a>
						
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Position from '../../components/Position'
import SiderMenu from '../../components/SiderMenu'
import {CARD_TYPE, commonAjax, PLATFORM_PREFIX, FAMILY_RALATION, SEX} from  '../../api/api'
import {testCardNumber, getBirthdayFromIdCard, getSexFromIdCard} from '../../common/js/util'

export default {
  data () {
    return {
      dialogShow: false,
      person: {phoneNo: localStorage.phoneNumber || ''},
      ruleForm: {
        realName: '',
        cardType: '01',
        cardNo: '',
        phoneNumber: localStorage.phoneNumber || ''
      },
      defaultDisabled: {
        realName: false,
        sex: false,
        cardType: false,
        cardNo: false,
        bornDate: false,
        phoneNumber: false
      },
      disabled: {
        realName: false,
        sex: false,
        cardType: false,
        cardNo: false,
        bornDate: false,
        phoneNumber: false
      },
      rules: {
        realName: {required: true, message: '真实姓名不能为空'},
        cardNo: {required: true, message: '证件号码不能为空'}
      },
      bornDate: '',
      sex: '',
      SEX: SEX,
      CARD_TYPE: CARD_TYPE,
      FAMILY_RALATION: FAMILY_RALATION
    }
  },
  mounted () {
    if (!localStorage.accessToken) {
			this.$message({message: '请先登录', type: 'error'})
			return
		}
    if (this.$route.query.from === 'login') {
      this.openDialog()
      return
    }
    this.getFamilys()
  },
  watch: {
    'ruleForm.cardNo': function (val) {
      if (this.ruleForm.cardType === '01') {
        this.bornDate = getBirthdayFromIdCard(val)
        this.sex = getSexFromIdCard(val)
      }
    }
  },
  methods: {
     getFamilys () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax([true], `${PLATFORM_PREFIX}.familyService`, 'getFamilyMemberList').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200 && res.data.body) {
          this.person = res.data.body[0]
          localStorage.person = JSON.stringify(this.person)
        } else {
          this.$message({
            message: '请完善用户信息',
            type: 'error'
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        localStorage.removeItem('accessToken')
        location.reload()
      })
    },
    openDialog () {
      this.dialogShow = true
      let f = this.person
      console.log(f)
      if (!f.sex) {
        // 完善用户信息
        this.disabled = {
          realName: false,
          sex: false,
          cardType: false,
          cardNo: false,
          bornDate: false,
          phoneNumber: true
        }
      } else {
        // 修改用户信息
        if (f.certificate && f.certificate.certificateType === '01') {
          // 使用身份证的 所有信息不能修改
          this.disabled = {
            realName: true,
            sex: true,
            cardType: true,
            cardNo: true,
            bornDate: true,
            phoneNumber: true
          }
        } else {
          // 使用其他证件的 只能修改： 出生日期 、性别
          this.disabled = {
            realName: true,
            sex: false,
            cardType: true,
            cardNo: true,
            bornDate: false,
            phoneNumber: true
          }
        }
        this.ruleForm = {
          realName: f.personName,
          cardType: f.certificate.certificateType,
          cardNo: f.certificate.certificateNo,
          phoneNumber: f.phoneNo,
          mpiId: f.mpiId
        }
        this.sex = f.sex
        this.bornDate = f.dob
      }
    },
    confirmSubmit (form) {
      this.$refs[form].validate(valid => {
        if (!valid) {
          return false
        }
        // 只验证身份证格式
        if (!testCardNumber(this.ruleForm.cardNo) && this.ruleForm.cardType === '01') {
          this.$message({
            message: '身份证号码格式有误',
            type: 'error'
          })
          return
        }
        this.$store.commit('UPDATE_LOADING')
        commonAjax([{
          personName: this.ruleForm.realName,
          sex: this.sex,
          phoneNo: this.ruleForm.phoneNumber || '',
          dob: this.bornDate,
          certificate: {
            certificateType: this.ruleForm.cardType,
            certificateNo: this.ruleForm.cardNo,
            source: '01' // 中国
          }
        }], `${PLATFORM_PREFIX}.personService`, 'saveSelfInfo').then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$router.replace('/personal')
            setTimeout(() => location.reload(), 1500)
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(res => {
          this.$store.commit('UPDATE_LOADING')
          this.$message({
            message: '请求服务器失败',
            type: 'error'
          })
        })
      })
    }
  },
  components: {Position, SiderMenu}
};
</script>
<style lang="less">
.personal-dialog {
  .el-dialog__body {
    margin: auto;
    width: 420px;
  }
}
</style>


